<script>
init({
  title: 'Fixed Columns',
  desc: 'Use Plugin: bootstrap-table-fixed-columns to enable the fixed columns feature.',
  links: [
    'bootstrap-table.min.css',
    'extensions/fixed-columns/bootstrap-table-fixed-columns.min.css'
  ],
  scripts: [
    'bootstrap-table.min.js',
    'extensions/fixed-columns/bootstrap-table-fixed-columns.min.js'
  ]
})
</script>

<template>
  <div class="toolbar">
    <div>
      <label class="checkbox">
        <input
          id="height"
          type="checkbox"
          checked
        > Enable Height
      </label>
    </div>
    <div class="form-inline">
      <span class="mr10">Fixed Number: </span>
      <input
        id="fixedNumber"
        class="form-control mr10"
        type="number"
        value="2"
        min="1"
        max="5"
      >
      <span class="mr10">Fixed Right Number: </span>
      <input
        id="fixedRightNumber"
        class="form-control"
        type="number"
        value="1"
        min="0"
        max="5"
      >
    </div>
    <div class="form-inline">
      <span class="mr10">Cells: </span>
      <input
        id="cells"
        class="form-control mr10"
        type="number"
        value="20"
        min="1"
        max="30"
      >
      <span class="mr10">Rows: </span>
      <input
        id="rows"
        class="form-control mr10"
        type="number"
        value="20"
        min="1"
        max="50"
      >
      <button
        id="build"
        class="btn btn-secondary"
      >
        Rebuild Table
      </button>
    </div>
  </div>

  <table id="table"></table>
</template>

<script>
  const $table = $('#table')

  function buildTable ($el) {
    const cells = +$('#cells').val()
    const rows = +$('#rows').val()
    let i
    let j
    let row
    const columns = [
      {
        field: 'state',
        checkbox: true,
        valign: 'middle'
      }
    ]
    const data = []

    for (i = 0; i < cells; i++) {
      columns.push({
        field: `field${i}`,
        title: `Cell${i}`,
        sortable: true,
        valign: 'middle',
        formatter (val) {
          return `<div class="item">${val}</div>`
        },
        events: {
          'click .item' () {
            console.log('click')
          }
        }
      })
    }
    for (i = 0; i < rows; i++) {
      row = {}
      for (j = 0; j < cells + 3; j++) {
        row[`field${j}`] = `Row-${i}-${j}`
      }
      data.push(row)
    }
    $el.bootstrapTable('destroy').bootstrapTable({
      height: $('#height').prop('checked') ? 400 : undefined,
      columns,
      data,
      search: true,
      showColumns: true,
      showToggle: true,
      clickToSelect: true,
      fixedColumns: true,
      fixedNumber: +$('#fixedNumber').val(),
      fixedRightNumber: +$('#fixedRightNumber').val()
    })
  }

  function mounted () {
    buildTable($table)

    $('#build').click(function () {
      buildTable($table)
    })
  }
</script>

<style>
.mr10 {
  margin-right: 10px;
}
</style>
